import React, { lazy, Suspense } from "react";
import Tab from "../Tab/Tab";
import "./Course.scss";
import { useEffect, useState, useRef } from "react";
// import GoodSelect from "../GoodSelect/GoodSelect";
// import CourseCate from "../CourseCate/CourseCate";
// import CourseFields from "../CourseFields/CourseFields";
import { get_course_cates } from "../../utils/api";
const GoodSelect = lazy(() => import("../GoodSelect/GoodSelect"));
const CourseCate = lazy(() => import("../CourseCate/CourseCate"));
const CourseFields = lazy(() => import("../CourseFields/CourseFields"));
function Course() {
  const [catesData, setCatesData] = useState();
  // 点击让上面的tab处于选中状态
  const [changeTab, setChangeTab] = useState(0);
  // 底下内容模块切换显示
  const [changeCon, setChangeCon] = useState("select");
  useEffect(() => {
    async function getCoursecates() {
      let { course_fields } = await get_course_cates();
      console.log("获取教程分类数据", course_fields);
      setCatesData(course_fields);
    }
    getCoursecates();
  }, []);

  // 分类事件点击按钮
  const catesEvent = () => {
    setChangeTab(1);
    setChangeCon("cate");
  };
  // 精选按钮点击事件
  const goodSelectEvent = () => {
    setChangeTab(0);
    setChangeCon("select");
  };
  // 接口出来的tab数据点击事件
  const tabsEvent = (id) => {
    console.log("id--", id);
    setChangeTab(id);
    setChangeCon("field");
  };
  return (
    <div className="Course">
      <div className="tabs">
        <div className="item" onClick={() => catesEvent()}>
          <p className={changeTab === 1 ? "active" : ""}>分类</p>
        </div>
        <div className="item" onClick={() => goodSelectEvent()}>
          <p className={changeTab === 0 ? "active" : ""}>精选</p>
        </div>
        {catesData &&
          catesData.map((item) => (
            <div
              className="item"
              key={item.id}
              onClick={() => tabsEvent(item.id)}
            >
              <p className={changeTab === item.id ? "active" : ""}>
                {item.name}
              </p>
            </div>
          ))}
      </div>
      <div className="course_con">
        {changeCon === "cate" ? (
          <Suspense fallback={<div>loading...</div>}>
            <CourseCate></CourseCate>
          </Suspense>
        ) : (
          ""
        )}
        {changeCon === "select" ? (
          <Suspense fallback={<div>loading...</div>}>
            <GoodSelect></GoodSelect>
          </Suspense>
        ) : (
          ""
        )}
        {changeCon === "field" ? (
          <Suspense fallback={<div>loading...</div>}>
            <CourseFields></CourseFields>
          </Suspense>
        ) : (
          ""
        )}
      </div>
      <div className="bottom">
        <Tab></Tab>
      </div>
    </div>
  );
}
export default Course;
